前幾篇，我分別認識了用 HTML 打造骨架、用 CSS 裝飾外觀，以及用 JavaScript 撰寫邏輯與事件。

今天終於要迎接前端學習裡可能最激動人心的時刻——DOM 操作（Document Object Model），也就是把 HTML、CSS 與 JS 三者正式串接起來！

如果用設計軟體來比喻，DOM 就像是把整個網頁的圖層結構變成一個「即時控制面板」。透過 JavaScript，我們可以直接去讀取、修改甚至創造網頁上的任何一個圖層與屬性。

抓取元素與動態修改

透過 querySelector 把 HTML 元素抓進 JS 裡，然後就能隨心所欲地操控它：

// 1. 抓取網頁上的標題元素
const myTitle = document.querySelector("#title");

// 2. 當事件觸發時，動態改變它的文字內容與樣式
myTitle.textContent = "嗨！這是被 JS 改變的新標題！";
myTitle.style.color = "#e65100"; // 直接修改 CSS 樣式

或者還有一個的方式，是透過動態切換 Class 來改變外觀：

const cardBox = document.querySelector(".card");

// 點擊後切換樣式 Class
cardBox.classList.toggle("active");

以前覺得網頁會因為點擊而變色、彈出視窗、切換版面很神祕，今天才發現：原來就是靠 JS 去抓取 HTML 元素，再隨時調整它的 CSS 樣式或內容！

當 HTML、CSS、JS 三者真正串接在一起的那一刻，超成就感耶！

Day 27，打通了前端的任督二脈？